<template>
  <div>
    <el-form :inline="true"
             ref="form"
             :model="form">
      <el-form-item style="height: 10%;">
        <el-input v-model="form.orderFormDestination"
                  placeholder="目的地"
                  size="30px"
                  :clearable="true"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker v-model="form.dateRange"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        value-format="yyyy-MM-dd">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="success"
                   @click="OrderShows">查询</el-button>
        <el-button type="success"
                   @click="exportExcel">导出订单</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="orderList"
              border
              style="width: 100%">
      >
      <el-table-column fixed
                       prop="orderFormId"
                       label="订单Id"
                       width="150">
      </el-table-column>
      <el-table-column prop=orderFormNo
                       label="订单编号"
                       width="120">
      </el-table-column>
      <el-table-column prop="orderFormOrigin"
                       label="出发点"
                       width="120">
      </el-table-column>
      <el-table-column prop="orderFormDestination"
                       label="目的地"
                       width="120">
      </el-table-column>
      <el-table-column prop="orderFormPeopleNum"
                       label="出行人数"
                       width="120">
      </el-table-column>
      <el-table-column prop="orderFormBudget"
                       label="旅行预算"
                       width="120">
      </el-table-column>
      <el-table-column prop="orderFormTime"
                       label="计划天数"
                       width="120">
      </el-table-column>
      <el-table-column prop="orderFormDate"
                       label="启程时间"
                       width="120">
      </el-table-column>
      <el-table-column prop="orderFormAirTicketService"
                       label="是否订购订购机票服务"
                       width="120">
        <template slot-scope="scope">
          <p v-if="scope.row.orderFormAirTicketService=='0'">否</p>
          <p v-if="scope.row.orderFormAirTicketService=='1'">是</p>
        </template>
      </el-table-column>
      <el-table-column prop="orderFormBulletTrain"
                       label="是否订购动车服务"
                       width="120">
        <template slot-scope="scope">
          <p v-if="scope.row.orderFormBulletTrain=='0'">否</p>
          <p v-if="scope.row.orderFormBulletTrain=='1'">是</p>
        </template>
      </el-table-column>
      <el-table-column prop="orderFormAccommodationService"
                       label="是否订购酒店服务"
                       width="120">
        <template slot-scope="scope">
          <p v-if="scope.row.orderFormAccommodationService=='0'">否</p>
          <p v-if="scope.row.orderFormAccommodationService=='1'">是</p>
        </template>
      </el-table-column>
      <el-table-column prop="orderFormDriver"
                       label="是否需要提供司机"
                       width="120">
        <template slot-scope="scope">
          <p v-if="scope.row.orderFormDriver=='0'">否</p>
          <p v-if="scope.row.orderFormDriver=='1'">是</p>
        </template>
      </el-table-column>
      <el-table-column prop="orderFormDesc"
                       label="备注信息"
                       width="120">
      </el-table-column>
      <el-table-column fixed="right"
                       label="操作"
                       width="300">
        <!-- <el-button @click="deleteOrder('UserId')" type="text" size="small">删除订单</el-button> -->
        <template slot-scope="scope">
          <span v-if="scope.row.orderFormState==2">
            <el-button size="small"
                       type="text"
                       @click="submit(scope.row.orderFormId)"
                       disabled>
              <!-- <p v-if="scope.row.">否</p> -->
              {{scope.row.orderFormState==2?"已提交订单":"提交订单"}}
            </el-button>
          </span>
          <span v-if="scope.row.orderFormState==1">
            <el-button size="small"
                       type="text"
                       @click="submit(scope.row.orderFormId)">
              <!-- <p v-if="scope.row.">否</p> -->
              {{scope.row.orderFormState==2?"已提交订单":"提交订单"}}
            </el-button>
          </span>
          <el-button @click="dialog.evaluation = true"
                     type="text"
                     size="small">订单评价</el-button>
        </template>

      </el-table-column>

    </el-table>
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="this.form.currentPage"
                   :page-sizes="this.pageInfo.pageSizes"
                   :page-size="this.form.pageSize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="this.pageInfo.total">
    </el-pagination>

    <!-- evaluation -->
    <el-dialog title="订单评价"
               :visible.sync="dialog.evaluation"
               width="50%">

      <el-form ref="Evaluationform"
               v-model="Evaluationform"
               label-width="80px">
        <el-form-item label="订单编号">

        </el-form-item>
        <!-- <el-form-item label="订单评分">
          <el-rate v-model="form.evaluateMessage"
                   show-score
                   text-color="#ff9900"
                   score-template="{value}">
          </el-rate>
        </el-form-item> -->
        <el-form-item label="头像"
                      prop="headImg"
                      hidden>
          <el-input v-model="Evaluationform.evaluateImage1"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="评价内容"
                      prop="evaluateMessage">
          <div style="margin: 20px 0;"></div>
          <el-input type="textarea"
                    placeholder="请输入内容"
                    v-model="Evaluationform.evaluateMessage"
                    maxlength="30"
                    show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="上传图片">
          <!-- <el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :file-list="fileList"
  list-type="picture">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload> -->
          <el-upload class="upload-demo"
                     action="http://localhost:8888/uploadss"
                     :headers="upload.headerObj"
                     :on-preview="handlePreview"
                     :on-remove="handleRemove"
                     :on-success="handleSuccess"
                     :file-list="fileList"
                     list-type="picture">
            <!-- <img v-if="imageUrl"
                 :src="imageUrl"
                 class="avatar" />
            <i v-else
               class="el-icon-plus avatar-uploader-icon"></i> -->
            <el-button size="small"
                       type="primary">点击上传</el-button>
            <div slot="tip"
                 class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
          </el-upload>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary"
                     @click="addEvaluation">立即提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>
<script>
export default {
  data () {
    return {

      form: {
        pageSize: 5,
        currentPage: 1,
        dateRange: [],
        orderFormDestination: "",
      },
      Evaluationform: {},
      imageUrl: "",

      fileList: [{ name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }, { name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }],

      value: 0,
      // value: {},
      activeName: 'first',
      orderList: [],
      fileList: [],
      dialog: {
        evaluation: false,
        complaint: false,
      },
      textarea: '',
      pageInfo: {
        total: 0,
        pageSizes: [5, 10, 20, 50],
      },
    };
  },
  created () {
    this.userId = JSON.parse(sessionStorage.getItem("userId"));
    this.form.userId = this.userId;
    this.OrderShows();
  },
  methods: {
    addEvaluation () {
      this.Evaluationform.userId = this.userId;
      this.$axios.post("evaluation/add", this.Evaluationform).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("添加成功");
          this.dialog.evaluation = false; //关闭模态框
          //注意要指定prop="did"属性才能起作用
          this.$refs.Evaluationform.resetFields();
          this.$refs.upload.clearFiles();
          this.imageUrl = "";
          // this.loadUsers(); //刷新
        }
      });
    },
    exportExcel () {
      this.$axios
        .post("orders/exportExcel", this.form, { responseType: 'blob' })
        .then((res) => {
          let fileName = res.headers["content-disposition"].split("=")[1];//得到后端生成的文件名          
          let url = window.URL.createObjectURL(new Blob([res.data]));
          let dom = document.createElement("a");
          dom.style.display = "none";
          dom.href = url;
          dom.setAttribute("download", fileName); //指定下载后的文件名，防跳转
          document.body.appendChild(dom);
          dom.click();
          // 释放内存
          dom.parentNode.removeChild(dom)
          window.URL.revokeObjectURL(dom.href);
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    handleSizeChange (size) {
      this.query.pageSize = size;
      this.OrderShows();
    },
    handleCurrentChange (currentPage) {
      this.query.currentPage = currentPage;
      this.OrderShows();
    },

    submit (orderFormId) {
      this.$axios.get("finally/" + orderFormId).then((res) => {
        if (res.data.code == 200) {
          console.log("提交完成");
          this.$message.success(res.data.messages);
          this.orderList = res.data.data.orderList;

        }
      });
    },
    handleSuccess (res, file) {
      // this.imageUrl=this.form.imageUrl;
      if (res.code == 200) {
        this.imageUrl = res.message;
        this.Evaluationform.evaluateImage1 = res.message; //将返回的文件储存路径赋值picture字段
      }
    },

    upload: {
      headerObj: {
        //Spring security时需要传递token，否则不需要该配置
        // Authorization: sessionStorage.getItem("authorization"),
      },
    },
    handleRemove (file, fileList) {
      console.log(file, fileList);
    },
    handlePreview (file) {
      console.log(file);
    },
    open () {
      this.dialog.complaint = true;
    },
    OrderShows () {
      this.$axios.post("orders/getAll", this.form).then((resp) => {
        this.orderList = resp.data.data.orderList;
        this.pageInfo.total = resp.data.data.total;
        // this.dialog.updateshow = true;

      });

    },
    handleClick (tab, event) {
      console.log(tab, event);
    },
    delete (row) {
      console.log(row);
    }
  }
};

</script>